{% extends 'base.html' %}
{% block toptoolbar %}
<style type="text/css" media="screen">
    table.calendar td.ui-selecting, table.calendar td.ui-selected {
        background-color:#7CBEFF;
        color:white;
    }
</style>
<script type="text/javascript" charset="utf-8">
    selectedDates = [];
    
    $(document).ready(function(){
        
        setInterval(function(){
            if($('td.ui-selected').length === 0){
                selectedDates = [];
                toggleControls(selectedDates);
            }
        }, 500);
        
        function toggleControls(selected){
            if(selected.length){
                $('ul.actions li a').removeClass('disabled');
            }else{
                $('ul.actions li a').addClass('disabled');                
            }
        }
        
        $('#content').selectable({
            filter: 'table.calendar td:not(.hidden)',
            selected: function(event, ui) {
                table = $(ui.selected).parentsUntil('table').parent();
                selected_day = new Date(
                    parseInt(table.data('year')), 
                    parseInt(table.data('month')) - 1, 
                    parseInt($(ui.selected).text()));
                selectedDates.push(selected_day);
                toggleControls(selectedDates);
            },
            unselected: function(event, ui){
                table = $(ui.unselected).parentsUntil('table').parent();
                unselected_day = {
                    day: $(ui.unselected).text(),
                    month: table.data('month'),
                    year: table.data('year')
                };
                for(var i = 0; i < selectedDates.length; i++){
                    if(unselected_day.day === selectedDates[i].day && unselected_day.month === selectedDates[i].month && unselected_day.year === selectedDates[i].year){
                        selectedDates.splice(i, 1);
                    }
                }
                toggleControls(selectedDates);
            }
        });
        function datetimes(dates){
            datetimes = [];
            for(var i=0; i<dates.length;i++){
                datetimes.push('datetime.datetime('+dates[i].year+', '+dates[i].month+', '+dates[i].day+', 0, 0)');
            }
            return "["+datetimes.join(', ')+"]";
        }
        
        $('ul.actions a').click(function(e){
            e.preventDefault();
            if($(this).hasClass('disabled')){
                alert('Select a date or range of dates first by clicking and dragging on the calendar.');
            }else{
                selectedDates.sort(function(a, b){return a - b;})
                var date = new Date(selectedDates[0]);
                for(var i=1;i<selectedDates.length;i++){
                    date.addDays(1);
                    if(date < selectedDates[i] || date > selectedDates[i]){
                        alert('You must select contiguous dates.');
                        break;
                    }
                }
                var end = new Date(selectedDates[selectedDates.length - 1]);
                var start = selectedDates[0];
                end.addDays(1);
                // end.addHours(23);
                // end.addMinutes(59);
                // end.addSeconds(59);
                var url = $(this).attr('href');
                var path;
                if(url.indexOf('?') === -1){
                    path =  url + '?start='+ start.format('Y-m-d H:i:s') + '&end=' + end.format('Y-m-d H:i:s');
                }else{
                    path =  url + '&start='+ start.format('Y-m-d H:i:s') + '&end=' + end.format('Y-m-d H:i:s');
                }
                window.location = path;
            }
        });
        
        $('table.calendar td.Milestone:not(.hidden), table.calendar td.Holiday:not(.hidden), table.calendar td.obligation:not(.hidden)').each(function(){
            table = $(this).parentsUntil('table').parent();
            $(this).qtip({
                content: {
                    url: '/calendar/day/',
                    data: {
                        day: $(this).text(),
                        month: table.data('month'),
                        year: table.data('year')
                    },
                    method: 'get'
                },
                hide: {
                    delay:250,
                    fixed: true
                },
                style: {
                    name: 'light',
                    tip: {
                        corner: 'topLeft'
                    }
                }
            });   
        });
        
    });
</script>
<p>select dates to add new events</p>
<ul class="actions">
    <li><a class="Holiday disabled" href="/holidays/create/">add holiday (applies to everyone)</a></li>
    <li><a class="Vacation disabled" href="/obligations/create/?type=Vacation">add vacation</a></li>
    <li><a class="Meeting disabled" href="/obligations/create/?type=Meeting">add meeting</a></li>
    <li><a class="Other disabled" href="/obligations/create/?type=Other">add other type of obligation</a></li>
</ul>
<br style="clear:both">
{% endblock toptoolbar %}
{% block body %}
    {% for month in data %}
        <table data-month="{{month.n}}" data-year="{{month.year}}" class="calendar">
            <thead>
                <tr>
                    <th colspan="7">{{month.month}}</th>
                </tr>
                <tr>
                    {% for dayheader in month.weekheader %}
                        <th>{{dayheader}}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for week in month.weeks %}
                    <tr>
                        {% for day in week %}
                            <td class="{{day.classes}}">{{day.n}}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endfor %}
    <br style="clear:both;">
{% endblock body %}